<template>
  <div class="brand-wrapper">
    <!--    搜索区域-->
    <div class="search-box">
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item label="角色名称">
          <el-input v-model="searchForm.roleName" placeholder="请输入品牌名称"></el-input>
        </el-form-item>

        <el-date-picker
            v-model="chooseDate"
            style="width: 280px"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="chooseDateChange"
            size="mini"
            align="right">
        </el-date-picker>
        <el-form-item style="margin-left: 10px">
          <el-button type="primary" @click="searchPage">搜索</el-button>
          <el-button type="warning" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    操作区域  -->
    <div class="exec-box">
      <el-button type="primary" size="mini" @click="addBtnClick" v-hasperm="'system:role:add'">新建</el-button>
      <el-button type="success" size="mini" :disabled="selectIds.length!=1"
                 v-hasperm="'system:role:edit'"
                 @click="createDialog=true,findById(selectIds[0])">编辑
      </el-button>
      <el-button type="danger" size="mini" :disabled="selectIds.length<=0" @click="showBatchDeleteDialog"
                 v-hasperm="'system:role:batch'">删除
      </el-button>
    </div>


    <el-row :gutter="30" style="height: 90%">
      <el-col :span="14" style="height: 90%">
        <!--    数据表格-->
        <el-scrollbar>
          <el-table
              @row-click="rowClick"
              highlight-current-row
              @selection-change="selectChange"
              :data="tableData"
              style="width: 100%">
            <el-table-column
                type="selection"
                align="center"
                width="55"/>
            <el-table-column
                align="center"
                prop="id"
                label="角色id"
                width="80"
            >
            </el-table-column>
            <el-table-column
                align="center"
                prop="roleName"
                label="角色名称"
            >
            </el-table-column>

            <el-table-column
                align="center"
                prop="roleDesc"
                label="角色描述"
            >
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
            >
              <template v-slot="obj">
                <el-button type="success" size="mini" @click.native.stop="findById(obj.row.id)"
                           v-hasperm="'system:role:edit'">编辑
                </el-button>
                <el-popconfirm
                    style="margin-left: 8px"
                    confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    @confirm="deleteById(obj.row.id)"
                    icon-color="red"
                    title="这是一段内容确定删除吗？"
                >
                  <el-button slot="reference" size="mini" @click.native.stop type="danger"
                             v-hasperm="'system:role:delete'">删除
                  </el-button>
                </el-popconfirm>

              </template>

            </el-table-column>

          </el-table>

          <!--    分页区域 -->
          <div class="page-box">
            <el-pagination
                background
                layout="prev, pager, next"
                @current-change="pageChange"
                :page-size="searchForm.pageSize"
                :current-page="searchForm.currentPage"
                :total="total">
            </el-pagination>
          </div>
        </el-scrollbar>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card" shadow="never" v-hasperm="'system:role:menu'">
          <div slot="header" class="clearfix">
            <span><strong>分配权限</strong></span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="setRoleMenu">确定</el-button>
          </div>
          <el-scrollbar style="height: 400px">
            <el-tree
                ref="huigeTree"
                :data="menuList"
                show-checkbox
                node-key="id"
                :props="defaultProps"
            >
            </el-tree>
          </el-scrollbar>

        </el-card>

      </el-col>
    </el-row>


    <!--    新建弹框-->
    <el-dialog
        title="实体操作"
        :visible.sync="createDialog"
        width="40%">
      <el-form ref="form" label-width="80px" :model="formData" :rules="rules" label-position="middle" size="mini">

        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formData.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="createDialog = false" size="mini">取 消</el-button>
    <el-button type="success" @click="addOrEdit" size="mini">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script src="./index.js"></script>

<style src="./index.scss" lang="scss">

</style>
